<template>
	<view class="category-container">
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="search-box" @click="goSearch">
				<uni-icons type="search" size="20" color="#999"></uni-icons>
				<text class="search-placeholder">搜索商品</text>
			</view>
		</view>
		
		<view class="content">
			<!-- 左侧分类菜单 -->
			<scroll-view scroll-y class="left-aside" :scroll-top="leftScrollTop">
				<view class="category-menu">
					<view
						v-for="(item, index) in flist"
						:key="item.id"
						class="category-item"
						:class="{active: item.id === currentId}"
						@click="tabtap(item, index)"
					>
						<view class="category-text">
							<text class="category-name">{{item.name}}</text>
							<view class="category-indicator" v-if="item.id === currentId"></view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 右侧分类内容 -->
			<scroll-view
				scroll-with-animation
				scroll-y
				class="right-aside"
				@scroll="asideScroll"
				:scroll-top="tabScrollTop"
			>
				<view class="category-content">
					<!-- 统一的二级分类卡片网格 -->
					<view class="category-grid">
						<view
							@click="navToList(item.id)"
							class="category-card"
							v-for="item in getAllDisplayItems()"
							:key="item.id"
						>
							<view class="card-image-wrapper">
								<image
									:src="item.icon || '/static/missing-face.png'"
									class="card-image"
									mode="aspectFit"
									@error="handleImageError"
								></image>
							</view>
							<view class="card-info">
								<text class="card-title">{{item.name}}</text>
							</view>
						</view>
					</view>
					
					<!-- 空状态 -->
					<view class="empty-state" v-if="slist.length === 0">
						<image src="/static/noSearch.png" class="empty-image"></image>
						<text class="empty-text">暂无分类数据</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { onTabPageShow } from '@/utils/tabbar.js';
	
	export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				leftScrollTop: 0,
				currentId: 1,
				flist: [],
				slist: [],
				totalCate: [],
				loading: true,
				imageError: false
			}
		},
		onLoad() {
			this.loadData();
		},
		onShow() {
			// 页面显示时更新tabbar状态
			onTabPageShow();
			
			// #ifdef MP-WEIXIN
			// 微信小程序环境下，确保 tabbar 正确显示当前选中状态
			try {
				const app = getApp();
				if (app && typeof app.getTabBar === 'function' && app.getTabBar()) {
					const tabbar = app.getTabBar();
					tabbar.setData({
						selected: 1 // 分类页面对应的索引
					});
					tabbar.getCartCount && tabbar.getCartCount();
				}
			} catch (e) {
				console.log('更新分类页 tabbar 状态失败', e);
			}
			// #endif
		},
		methods: {
			async loadData() {
				try {
					this.loading = true;
					let list = await this.$api.goods.goodsCate.get();
					
					// 清空数组
					this.flist = [];
					this.totalCate = [];
					
					list.data.forEach(item => {
						if (!item.pid) {
							this.flist.push(item);
						} else {
							this.totalCate.push(item)
						}
					})
					
					// 默认选中第一个分类
					if (this.flist.length > 0) {
						this.tabtap(this.flist[0], 0);
					}
				} catch (error) {
					console.error('加载分类数据失败:', error);
					this.$tool.msg('加载分类数据失败，请重试');
				} finally {
					this.loading = false;
				}
			},
			//一级分类点击
			tabtap(item, index) {
				this.currentId = item.id;
				this.slist = [];
				this.totalCate.forEach(vo => {
					if (vo.pid == item.id) {
						this.slist.push(vo)
					}
				})
				
				// 滚动到顶部
				this.tabScrollTop = 0;
			},
			// 右侧栏滚动
			asideScroll(e) {
				// 由于现在统一显示所有二级分类，不再需要滚动定位功能
				// 保留方法以避免错误，但功能已简化
			},
			// 计算右侧栏每个tab的高度等信息
			calcSize() {
				// 由于现在统一显示所有二级分类，不再需要计算每个分组的高度
				this.sizeCalcState = true;
			},
			navToList(id) {
				uni.navigateTo({
					url: `/pages/product/list?id=${id}`
				})
			},
			// 跳转到搜索页面
			goSearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			// 处理图片加载错误
			handleImageError() {
				this.imageError = true;
			},
			// 获取要显示的项目
			getDisplayItems(section) {
				// 如果有子分类，显示子分类；否则显示当前分类
				return section.children && section.children.length > 0 ? section.children : [section];
			},
			// 获取所有要显示的二级分类项目
			getAllDisplayItems() {
				let allItems = [];
				this.slist.forEach(section => {
					const items = section.children && section.children.length > 0 ? section.children : [section];
					items.forEach(item => {
						allItems.push({
							id: item.id,
							name: item.name,
							icon: item.icon
						});
					});
				});
				return allItems;
			}
		}
	}
</script>

<style lang='scss' scoped>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.category-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 120rpx; /* 增加底部间距避免被自定义tabBar遮挡 */
		box-sizing: border-box;
	}

	// 顶部搜索栏
	.search-header {
		background: #fff;
		padding: 20upx 30upx;
		border-bottom: 1px solid #eee;

		.search-box {
			display: flex;
			align-items: center;
			background: #f5f5f5;
			border-radius: 8upx;
			padding: 16upx 20upx;

			.search-placeholder {
				margin-left: 16upx;
				font-size: 28upx;
				color: #999;
			}
		}
	}

	.content {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	// 左侧分类菜单
	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #f8f8f8;
	}

	.category-menu {
		padding: 10upx 0;
	}

	.category-item {
		position: relative;
		transition: all 0.2s ease;

		&.active {
			background: #fff;
			
			.category-name {
				color: $base-color;
			}

			.category-indicator {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 6upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
			}
		}

		.category-text {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30upx 20upx;
			position: relative;
		}

		.category-name {
			font-size: 28upx;
			color: $font-color-base;
			transition: color 0.2s ease;
			text-align: center;
			line-height: 1.4;
		}
	}

	// 右侧分类内容
	.right-aside {
		flex: 1;
		overflow: hidden;
		background: #fff;
	}

	.category-content {
		padding: 16upx;
		padding-bottom: 60upx; /* 为底部内容添加额外间距 */
	}

	.category-grid {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -6upx;
	}

	.category-card {
		width: calc(33.333% - 12upx);
		margin: 0 6upx 16upx;
		background: #fff;
		border-radius: 12upx;
		overflow: hidden;
		transition: all 0.3s ease;
		border: 1px solid #f0f0f0;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.04);

		&:active,
		&.card-hover {
			transform: translateY(-2upx);
			box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.08);
		}
	}

	.card-image-wrapper {
		position: relative;
		width: 100%;
		height: 140upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fafafa, #f5f5f5);
		padding: 16upx;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), transparent);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.category-card:hover &::before,
		.category-card:active &::before {
			opacity: 1;
		}

		.card-image {
			width: 80upx;
			height: 80upx;
			transition: transform 0.3s ease;
		}

		.category-card:hover .card-image,
		.category-card:active .card-image {
			transform: scale(1.05);
		}
	}

	.card-info {
		padding: 12upx 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		position: relative;
		min-height: 60upx;
	}

	.card-title {
		font-size: 24upx;
		color: $font-color-dark;
		text-align: center;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		font-weight: 500;
	}

	.card-arrow {
		display: none;
	}

	// 空状态
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80upx 0;

		.empty-image {
			width: 160upx;
			height: 160upx;
			margin-bottom: 20upx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 28upx;
			color: $font-color-light;
		}
	}
</style>
